<template>
  <div class="container">
    <el-button plain :icon="'el-icon-'+icon" class="btn" @click="change"></el-button>

<!--    <el-breadcrumb separator="/" class="mianbaoxie">-->
<!--      <el-breadcrumb-item :to="{ path: '/IsHome' }">首页</el-breadcrumb-item>-->
<!--      <el-breadcrumb-item :to="{ path: '/IsgoodsMana' }">商品管理</el-breadcrumb-item>-->
<!--      <el-breadcrumb-item :to="{ path: '/IsUsers' }">用户管理</el-breadcrumb-item>-->
<!--      <el-breadcrumb-item :to="{ }"></el-breadcrumb-item>-->
<!--    </el-breadcrumb>-->

    <el-dropdown trigger="click" style="height: 40px" class="person">
      <el-avatar :src="head"></el-avatar>
      <el-dropdown-menu slot="dropdown">
        <div @click="dianji">
          <el-dropdown-item>退出</el-dropdown-item>
        </div>
      </el-dropdown-menu>
    </el-dropdown>

  </div>
</template>

<script>

export default {
  name: "IsHeader",

  data() {
    return {
      icon: "menu",
      head: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png'
    }
  },

  methods: {
    //点击改变导航栏状态
    change() {
      if (this.$store.state.isCollapse) {
        this.icon = 's-fold';
        this.$store.state.isCollapse = !this.$store.state.isCollapse
        this.$store.state.IsAsideh3 = '简易商城'
      } else {
        this.icon = 'menu';
        this.$store.state.isCollapse = !this.$store.state.isCollapse
        this.$store.state.IsAsideh3 = '商城'
      }
    },

    //退出
    dianji() {
      this.$store.commit('clearToken')
      this.$router.replace({
        name:'IsEnter'
      })
    },

  },


}
</script>

<style scoped>
.container {
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 60px;
  padding: 0 40px;
}
.mianbaoxie{
  position: relative;
  left: -37%;
}
</style>